<template>
  <view class="leave_box">
    <view class="a_header">
      <view class="a_box">
        <view class="nav_leave">
          <view class="n_l_l" @tap="goBack()">
            <img src="/static/images/job/icon_back_white.png" mode="scaleToFill" alt="">
          </view>
          <view class="n_l_c"></view>
          <view class="n_l_r"></view>
        </view>
        <view class="a_head">
          <view class="head_p">
            <img v-if="state!=-1" src="../../../static/images/job/icon_job_right.png" alt="">
            <view>{{state==-1?'历史面试':'已接受面试'}}</view>
          </view>
        </view>
        <view class="msg-box">
          <view class="msg-li">
            <img src="/static/images/job/icon_company_msg.png" mode="scaleToFill" alt="">
            <view class="l-c">
              <view class="p-name">{{ detailObj.enterpriseinfo.company_name }}</view>
              <view class="p-desc">我们为您发送一份面试邀请，请及时…</view>
            </view>
            <img class="li-r-arrow" src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
          </view>
          <view class="i-c-p i-f">
            <view class="i-c-p-l">時間</view>
            <view>{{ detailObj.interview_time_format }}</view>
          </view>
          <view class="i-c-p">
            <view class="i-c-p-l">職位</view>
            <view>‌{{ detailObj.job.job_name }}/{{ detailObj.job.salary_text }}</view>
          </view>
          <view class="i-c-p">
            <view class="i-c-p-l">聯系人</view>
            <view>{{ detailObj.contact }}</view>
          </view>
          <view class="i-c-p">
            <view class="i-c-p-l">電話</view>
            <view>{{ detailObj.contact_phone }}</view>
          </view>
          <view class="p-gs">
            <img src="/static/images/job/icon_job_location.png" mode="scaleToFill" alt="">
            <view>公司地址</view>
          </view>
          <view class="p-dz">{{ detailObj.address }}</view>
          <view class="p-gs" v-if="false">
            <img src="/static/images/job/icon_job_result.png" mode="scaleToFill" alt="">
            <view>面試結果</view>
          </view>
          <view class="wrap-result" v-if="false">
            <!-- 没有面试结果 -->
            <view class="no" v-if="false">
              <img src="/static/images/job/icon_job_no_in.png" mode="scaleToFill" alt="">
              <view>還沒有面試結果</view>
            </view>
            <!-- 面试成功 -->
            <view class="success">
              <img src="/static/images/job/icon_job_tg.png" mode="scaleToFill" alt="">
              <view>面試通過！</view>
            </view>
            <!-- 面试失败 -->
            <view class="fail" v-if="false">
              <img src="/static/images/job/icon_job_mtg.png" mode="scaleToFill" alt="">
              <view>抱歉，沒有通過面試～</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="warp-footer" v-if="false">
      <view class="btn-jj" @tap="handleJJ()">拒絕面試</view>
      <view class="btn-js">接受面試</view>
    </view>
  </view>
</template>

<script>
import {jobInterviewDetail} from '../../../utils/userApi'
export default {
  components: {},
  data() {
    return {
      showCalendar: false,
      reason: '',
      stepsCurrent: -1,
      steps: [
        {
          name: '直接主管：'
        },
        {
          name: '總經理：'
        }
      ],
      vacationIndex: 0,
      vacationList: ['事假', '調休', '病假', '年假', '產假', '陪產假', '婚假', '例假', '喪假'],
      startDate: '',
      endDate: '',
      detailObj:{},
      state:0,
    };
  },
  props: {
    couponList: {}
  },
  computed: {
    reasonLen() {
      return this.reason.length
    },
    timeDays() {

    }
  },
  onLoad(options) {
    this.id=options.id
    this.state=options.state
    this.getDetails(this.id)
  },
  methods: {
    async getDetails(id){
      let res=await jobInterviewDetail({id:id})
      if(res.code==1){
        this.detailObj=res.data
      }else{
        uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        })
      }
    },
    handleJJ(){
      uni.showModal({
        title: '提示',
        confirmColor: '#007AFF',
        content: `確定要拒絕面試邀請嗎?`,
        success: res => {
        }
      });
    },
    goBack() {
      uni.navigateBack({ delta: 1 })
    },
    submitApply() {
      uni.showModal({
        title: '提示',
        content: `確定提交請假申請嗎？`,
        success: res => {
          console.log('999')
        }
      });
    },
    changeCalendar(e) {
      this.startDate = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
    },
    changeCalendarEnd(e) {
      this.endDate = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
    },
    changeVacationType() {
      let that = this
      uni.showActionSheet({
        itemList: that.vacationList,
        title: '請假類型',
        success: ({ tapIndex }) => {
          this.vacationIndex = tapIndex
        },
        fail: (error) => { }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.leave_box {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}

.a_box {
  width: 100%;
  height: 440px;
  background: linear-gradient(180deg, #0274F2 0%, #F4F6FA 100%);
}

.msg-box {
  width: calc(100% - 50px);
  padding: 10px 15px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
}

.msg-li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid #F3F3F3;
  img {
    display: block;
    width: 52px;
    height: 52px;
  }
  img.li-r-arrow{
    width: 7px;
    height: 14px;
  }
  .l-c{
    width: calc(100% - 62px);
    margin: 0 10px;
  }
  .l-r {
    width: calc(100% - 62px);
    font-size: 14px;
    color: #999999;
    line-height: 18px;
  }
}
.p-name {
  height: 21px;
  font-size: 15px;
  color: #333333;
  line-height: 21px;
}
.p-desc {
  height: 18px;
  font-size: 13px;
  color: #666666;
  line-height: 18px;
  margin-top: 5px;
}
.nav_leave {
  width: calc(100% - 20px);
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  font-size: 15px;
  color: #333333;
  line-height: 21px;
  background: transparent;
}
.n_l_l {
  width: 80px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  img {
    width: 9px;
    height: 16px;
    margin-left: 9px;
  }
}
.n_l_r {
  width: 80px;
  text-align: right;
}
.n_l_c {
  width: calc(100% - 90px);
  text-align: center;
}
.a_head {
  width: calc(100% - 20px);
  margin: 22px auto 10px;
  .head_p{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 36px;
    font-weight: 600;
    font-size: 25px;
    color: #FFFFFF;
    line-height: 36px;
    img {
      width: 25px;
      height: 25px;
      margin-right: 10px;
    }
  }
}
.i-f{
  margin-top: 34px;
}
.i-c-p{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  color: #333333;
  line-height: 21px;
  margin-bottom: 15px;
}
.i-c-p-l{
  width: 55px;
  height: 21px;
  font-size: 15px;
  color: #666666;
  line-height: 21px;
  text-align: left;
}
.p-gs{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 22px;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  margin-top: 5px;
  img{
    width: 16px;
    height: 19px;
    margin-right: 5px;
  }
}
.p-dz{
  margin: 10px 0 20px;
  height: 23px;
  font-size: 14px;
  color: #666666;
  line-height: 23px;
}
.wrap-result{
  view{
    height: 20px;
    font-size: 14px;
    display: grid;
    place-items: center;
    line-height: 20px;
  }
  img{
    width: 98px;
    height: 98px;
    display: block;
    margin: 20px auto 10px;
  }
  .no,.fail{
    color: #768396;
  }
  .success{
    color: #1C7AF7;
  }
}
.a_header{
  width: 100%;
  height: calc(100vh - 70px);
  overflow-y: scroll;
}
.warp-footer{
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 44px;
  text-align: center;
  background: #fff;
}
.btn-jj{
  width: 110px;
  height: 44px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  color: #1C7AF7;
  margin-right: 10px;
  border: 1px solid #1C7AF7;
}
.btn-js{
  width: 215px;
  height: 44px;
  background: linear-gradient( 90deg, #016CF1 0%, #0697F6 100%);
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  color: #FFFFFF;
}
</style>
